<template>
  <div class="container">
    <div class="blog">
      <h4><i class="el-icon-s-grid" />热门博客</h4>
      <el-row :gutter="20">
        <el-col :span="14">
          <div class="grid-content big bg-purple" :style="{backgroundImage: 'url(' + goodBlogs[0].img + ')'}">
            <p class="title">{{ goodBlogs[0].title }}</p>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content big bg-purple" :style="{backgroundImage: 'url(' + goodBlogs[1].img + ')'}">
            <p class="title">{{ goodBlogs[0].title }}</p>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col v-for="item in blogs" :key="item.img" :span="8">
          <div class="grid-content bg-purple" :style="{backgroundImage: 'url(' + item.img + ')'}">
            <p class="title">{{ item.title }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="speak">
      <h4><i class="el-icon-tickets" />精彩说说</h4>
      <el-row :gutter="20">
        <el-col v-for="(item, i) in speaks" :key="item.content" :span="12">
          <div class="grid-content bg-purple" :style="{backgroundColor: colorList[i % 6]}">
            <p>{{ item.content }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="video">
      <h4><i class="el-icon-film" />推荐视频</h4>
      <el-row :gutter="20">
        <el-col v-for="item in 5" :key="item" :span="6">
          <div class="grid-content bg-purple" style="background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2106474246,1283617636&fm=26&gp=0.jpg')">
            <p class="title">么么哒小仙女</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',

  data() {
    return {
      colorList: [
        'rgb(251,149,70)',
        'rgb(128, 222, 136)',
        'rgb(100, 229, 215)',
        'rgb(62, 192, 251)',
        'rgb(202, 104, 251)',
        'rgb(255, 205, 44)'
      ],
      goodBlogs: [
        {
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.52qingyin.cn%2Fwp-content%2Fuploads%2F2013%2F09%2Fqingyoushuilian3.jpg&refer=http%3A%2F%2Fwww.52qingyin.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616761715&t=298c46daf6b0234d443bc6ed7461a951',
          title: '极客日报第 74 期：周鸿祎：微信靠摇妹子起家；红米 K40 未发布就炸？真相来了；滴滴高管立军令状：若触碰安全红线指标，全年安全绩效考核结果清零'
        },
        {
          img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1856257744,310285552&fm=26&gp=0.jpg',
          title: '批评代码而不是人！15年程序员的职场箴言'
        }
      ],
      blogs: [
        {
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile01.16sucai.com%2Fd%2Ffile%2F2011%2F0801%2F20110801111724537.jpg&refer=http%3A%2F%2Ffile01.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616761142&t=23290de4956bfdb3bd89bd5616a24a5d',
          title: '批评代码而不是人！15年程序员的职场箴言'
        },
        {
          img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2995510980,183915099&fm=26&gp=0.jpg',
          title: '批评代码而不是人！15年程序员的职场箴言'
        },
        {
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201311%2F18%2F164818g2nfnttn3owvznvv.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616761771&t=48dda560984906074a6677c8076109e9',
          title: '批评代码而不是人！15年程序员的职场箴言'
        }
      ],
      speaks: [
        {
          content: '获得成功必然是一个不断学习成长的过程。在这个过程中，来自别人的指导意见以及经验之谈会给予我们一些启发和提示，从而避免许多不必要的弯路。择其善者而从之，其不善者而改之。'
        },
        {
          content: '在从事软件开发工作的15年中，我经历了许多不同的阶段。在某些时候，我恨不得把所有的软件开发工作都丢进地狱，宁愿跑到深山老林里去喂牛。'
        },
        {
          content: '当开始从事软件开发这一职业时，通常的入门都是从初级开发人员开始，但是初级开发人员的薪酬通常都很低。无论你多么努力，想在一家公司取得快速的进步并不是一件容易的事，尤其是如果你所在的是一家小公司的话。如果你想快速提高你的技能和你的薪水，那么，就需要经常换工作，寻找一个更好的职位。'
        },
        {
          content: '努力学习，努力提高技能，努力做正确的事情，但记得要为自己而不是为公司而做。'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
  h4 {
    font-weight: 700;
    font-size: 18px;
    padding: 10px 0;
    color: #ff4d4d;

    i {
      margin-right: 8px;
    }
  }

  .el-col {
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .grid-content {
    cursor: pointer;
  }

  .blog {
    .grid-content {
      border-radius: 4px;
      height: 200px;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      transition: all linear 0.3s;
      position: relative;

      &:hover {
        background-size: 110%;
      }

      .title {
        background: rgba(0, 0, 0, .3);
        color: #fff;
        font-size: 14px;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }

    .big {
      height: 300px;
    }
  }

  .speak {
    .grid-content {
      border-radius: 4px;
      height: 100px;

      p {
        color: #fff;
        padding: 8px;
        box-sizing: border-box;
        font-size: 14px;
      }
    }

    .bg-purple {
      background: #939393;
    }
  }

  .video {
    .grid-content {
      border-radius: 4px;
      height: 350px;
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      transition: all linear 0.3s;
      position: relative;

      &:hover {
        background-size: 110%;
      }

      .title {
        background: rgba(0, 0, 0, .3);
        color: rgba(255, 130, 47, 0.78);
        font-size: 14px;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
</style>
